<template>
  <div class="home">
    <home-header class="home-header" :city="city"></home-header>
    <home-swiper :swiperList="swiperList"></home-swiper>  <!--  如果头部信息不显示的话,使用本地文件展示即可 -->
    <home-catalog :iconList="iconList"></home-catalog>
    <home-hot 
      :hotPriseList="hotPriseList"
      :hotTrendList="hotTrendList"
      :hotContentList="hotContentList"
    ></home-hot>
    <home-weekend  :weekendList="weekendList"></home-weekend>
    <home-guess :guessList="guessList"></home-guess>
  </div>
</template>

<script>
import axios from 'axios'
import homeHeader from './components/homeHeader'
import homeSwiper from './components/homeSwiper'
import homeCatalog from './components/homeCatalog'
import homeHot from './components/homeHot'
import homeWeekend from './components/homeWeekend'
import homeGuess from './components/homeGuess'
export default {
  name: 'Home',
  components:{
    homeHeader,
    homeSwiper,
    homeCatalog,
    homeHot,
    homeWeekend,
    homeGuess
  },
  data () {
    return {
       city:'',
       guessList :[],
       hotContentList:[],
       hotPriseList:[],
       hotTrendList:[],
       iconList:[],
       swiperList:[],
       weekendList:[],
    }
  },
  methods:{
    getHomeDatr(){   //请求的地址
      axios.get("/api/index.json")
         .then(this.getHomeDataSuss)   //请求成功函数
    },
    getHomeDataSuss(res){   
     // console.log(res)   //将数据尝试打印出来
        res = res.data   //先将请求来的数据保存一下
       if(res.data){   //判断是否有数据,如果有
          const data = res.data   //因为是两层的data,所以需要保留两次
          this.city = data.city                    //对数据进行渲染,将数据的city保留到根组件中的city
          this.guessList = data.guessList
          this.hotContentList = data.hotContentList
          this.hotPriseList = data.hotPriseList
          this.hotTrendList = data.hotTrendList 
          this.iconList = data.iconList
          this.swiperList = data.swiperList
          this.weekendList = data.weekendList
       }
    }
  },
  mounted(){
    this.getHomeDatr()
  }
}
</script>

<style lang="stylus"  scoped>
    .home
      position: relative
      .home-header
        position :fixed
        top:0
        left:0
        z-index 100
        width :100%
</style>